import React, { Component } from 'react'
import { Text, StyleSheet, View, TouchableOpacity, Image } from 'react-native'
import ImagePicker from 'react-native-image-picker';


const options = {
  title: '选择头像',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
  cancelButtonTitle: '取消',
  takePhotoButtonTitle: '去拍照',
  chooseFromLibraryButtonTitle: '从手机相册中选择'
};

export default class IdCard extends Component {
  constructor(props) {
    super(props)

    this.state = {
      img1Source: {
        filename: '',
        uri: ''
      },
      img2Source: {
        filename: '',
        uri: ''
      }
    }
  }
  
  handleSaveImg = (type) => {

    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled video picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const { fileName, data, uri } = response;
        let imgSource = {
          fileName,
          // data,
          uri
        }
        if (type === 'img1') {
          this.setState({
            img1Source: imgSource
          })
        } else {
          this.setState({
            img2Source: imgSource
          });
        }
      }
    });
  }

  render() {
    return (
      <View style={{ flexDirection: 'column', alignItems: 'center', marginTop: 60, justifyContent: 'center' }}>
        <TouchableOpacity onPress={() => this.handleSaveImg('img1')}>
          <View
            style={[ styles.avatar,styles.avatarContainer,]}>
            {this.state.img1Source.uri === '' ? (
              <Text style={styles.texs}>点击上传身份证正面</Text>
            ) : (
                <Image style={styles.avatar} source={{ uri: this.state.img1Source.uri }} />
              )}
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this.handleSaveImg('img2')}>
          <View
            style={[styles.avatar,styles.avatarContainer,]}
          >
            {this.state.img2Source.uri === '' ? (
              <Text style={styles.texs}>点击上传身份证反面</Text>
            ) : (
                <Image style={styles.avatar} source={{ uri: this.state.img2Source.uri }} />
              )}
          </View>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  avatarContainer: {
     borderColor: '#559B9B',
     // borderWidth: 1 / PixelRatio.get(),
     borderWidth: 1,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius:6,
     marginBottom: 50
   },
   avatar: {
     width: 320,
     height: 180,
   },
   img:{
     flex: 1,
     marginBottom:62
   },
   texs: {
     fontSize: 30
   }
 })